<template>
  <div class="hong-form">
    <hong-form ref="form"
               v-model="form"
               :dicList="dicList"
               :options="formOptions"
               @js-to-native="handleJs2Native"></hong-form>
    <md-button type="primary"
               class="save-btn"
               @click="handleSave()">保 存</md-button>
  </div>
</template>

<script>
// @ is an alias to /src
function deepMap (list, index) {
  if (!list) return null
  index++
  return list.map(item => {
    if (!item.children) {
      return {
        label: item.title,
        value: item.unionMcc
      }
    } else {
      return {
        label: item.title,
        value: item.unionMcc,
        children: {
          label: '请选择',
          name: 'children' + index,
          options: deepMap(item.children, index)
        }
      }
    }
  })
}
export default {
  name: 'form-demo',
  components: {
  },
  data () {
    return {
      form: {},
      dicList: {},
      formOptions: {
        style: 'flat',
        items: [
          {
            label: '紧急联系人',
            type: 'multi-record',
            name: 'contact',
            noTitle: false,
            noBtn: false,
            isField: true,
            items: [
              {
                label: '测试',
                name: 'sfzOther',
                type: 'tab-picker',
                join: '。',
                describe: '我是描述',
                dicUrl: 'signal/mock/boc/tabPicker.json',
                value: ['-1', '-7', '5422'],
                showLast: true,
                rules: [
                  { required: true, message: '请上传身份证反面' }
                ],
                dicFormat (data) {
                  return {
                    label: '请选择',
                    name: 'all',
                    options: deepMap(data, 0)
                  }
                }
              },
              {
                label: '上传照片后自动识别身份信息（识别后请人工校对）',
                type: 'caption'
              },
              {
                label: '人物',
                name: 'clientType',
                dic: 'clientType',
                append: '信息',
                type: 'caption'
              },
              {
                label: '身份证人像面',
                name: 'sfzPositive',
                type: 'upload',
                brief: '请上传身份证正面',
                custom: 'idcard-front',
                capture: 'all',
                native: true,
                download: {
                  param: 'fileId'
                },
                upload: {
                  param: 'file',
                  prop: 'id'
                },
                rules: [
                  { required: true, message: '请上传身份证正面' }
                ]
              },
              {
                label: '身份证国徽面',
                name: 'sfzOther',
                type: 'upload',
                custom: 'idcard-back',
                capture: 'all',
                rules: [
                  { required: true, message: '请上传身份证反面' }
                ],
                done: data => {
                  console.log(data)
                }
              },
              {
                label: '姓名',
                name: 'name',
                type: 'input',
                mark: ['isElecSign', 'isFaceSign'],
                rules: [
                  { required: true, message: '' }
                ]
              },
              {
                label: '年龄',
                name: 'age',
                rules: [
                  { required: true, message: '' }
                ]
              },
              {
                label: '单独保存',
                name: 'editButton',
                type: 'button',
                buttonType: 'primary',
                click: ({ form, vue }) => {
                  vue.valid((a, b) => {
                    console.log(a, b)
                  })
                }
              }
            ]
          },
          {
            label: '多图片上传',
            name: 'multiUpload',
            type: 'multi-upload',
            brief: '请上传身份证正面',
            capture: 'all',
            accept: ['jpeg', 'png'],
            limit: 2,
            download: {
              format (data) {
                return data.map(item => item.url)
              }
            },
            upload: {
              param: 'file',
              prop: 'id'
            },
            rules: [
              { required: true, message: '请上传身份证正面' }
            ]
          },
          {
            label: '身份证人像面2',
            name: 'sfzPositive2',
            type: 'upload',
            brief: '请上传身份证正面',
            custom: 'idcard-front',
            capture: 'all',
            native: true,
            download: {
              param: 'fileId'
            },
            upload: {
              param: 'file',
              prop: 'id'
            },
            rules: [
              { required: true, message: '请上传身份证正面' }
            ]
          },
          {
            label: '身份证国徽面2',
            name: 'sfzOther2',
            type: 'upload',
            custom: 'idcard-back',
            capture: 'all',
            rules: [
              { required: true, message: '请上传身份证反面' }
            ],
            done: data => {
              console.log(data)
            }
          },
          {
            label: '姓名',
            name: 'name',
            isField: true,
            blur: ({ value }) => {
              console.log(value)
            }
          },
          {
            label: '性别',
            name: 'sex',
            type: 'picker',
            dicUrl: '/app-api/mock/data/mock14.json',
            props: {
              label: 'text',
              value: 'value'
            },
            responseFormat: (data) => {
              return data.combox
            },
            isField: true,
            blur: ({ value }) => {
              console.log(value)
            }
          },
          {
            label: '期限',
            name: 'repaymentPeriod',
            type: 'picker',
            rules: [{ required: true }],
            dicUrl: '/app-api/mock/data/mock14.json',
            props: {
              label: 'text',
              value: 'value'
            },
            dicFormat: (data) => {
              console.log('111', data)
              return data
            },
            responseFormat: (data) => {
              console.log('222', data)
              return data.combox
            },
            change: ({ value, form }) => {
            }
          },
          {
            label: '通话失败原因',
            isField: true,
            solid: true,
            name: 'reason',
            type: 'radio',
            showType: 'list',
            hasInput: true,
            inputLabel: '其他原因',
            inputPlaceholder: '请输入其他原因',
            dicData: [
              { label: '网络原因', value: '网络原因' },
              { label: '正脸照与身份证不符', value: '正脸照与身份证不符' },
              { label: '合同未签署', value: '合同未签署' }
            ],
            rules: [
              { required: true }
            ]
          },
          {
            label: '性别',
            isField: true,
            solid: true,
            align: 'left',
            name: 'sex',
            type: 'radio',
            dicData: [
              { label: '男', value: '男' },
              { label: '女', value: '女' }
            ],
            rules: [
              { required: true }
            ]
          },
          {
            disabled: true,
            value: ['睡觉'],
            label: '兴趣爱好',
            isField: true,
            solid: true,
            name: 'like',
            type: 'check',
            align: 'left',
            dicData: [
              { label: '打篮球', value: '打篮球' },
              { label: '打游戏', value: '打游戏' },
              { label: '看电影', value: '看电影' },
              { label: '逛街', value: '逛街' },
              { label: '睡觉', value: '睡觉' }
            ],
            rules: [
              { required: true }
            ]
          },
          {
            label: '兴趣爱好',
            isField: true,
            solid: true,
            name: 'likes',
            type: 'check',
            showType: 'list',
            dicData: [
              { label: '打篮球', value: '打篮球' },
              { label: '打游戏', value: '打游戏' },
              { label: '看电影', value: '看电影' },
              { label: '逛街', value: '逛街' },
              { label: '睡觉', value: '睡觉' }
            ],
            rules: [
              { required: true }
            ]
          },
          {
            label: '性别',
            isField: true,
            name: 'sex',
            type: 'select',
            dicData: [
              { label: '男', value: '男' },
              { label: '女', value: '女' }
            ],
            rules: [
              { required: true }
            ]
          },
          {
            label: '是否启用',
            isField: true,
            name: 'isUse',
            type: 'switch',
            activeValue: '400',
            inActiveValue: '200',
            activeColor: 'blue',
            inActiveColor: 'red',
            rules: [
              { required: true }
            ]
          },
          {
            label: '简介',
            value: '阿萨飒飒大陈小春',
            disabled: true,
            isField: true,
            solid: true,
            name: 'introduce',
            type: 'textarea',
            rules: [
              { required: true }
            ]
          }
        ]
      }
    }
  },
  created () {
    setTimeout(() => {
      this.form = {
        multiUpload: [
          { id: 1, url: 'https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF' },
          { id: 2, url: 'https://t7.baidu.com/it/u=2291349828,4144427007&fm=193&f=GIF' }
        ],
        contact: [
          { clientType: '1', name: '张三' }
        ]
      }
      this.dicList = {
        clientType: [{ label: '主贷人', value: '1' }]
      }
    }, 2000)
  },
  methods: {
    nativeClick () {
      console.log('nativeClick')
    },
    handleSave () {
      this.$refs.form.valid((valid, errorList) => {
        console.log(valid, errorList)
      })
    },
    handleJs2Native (data) {
      console.log('js-to-native', data)
    }
  }
}
</script>
<style lang="stylus" scoped>
.home
  height 100%
</style>
